<template>
    <div>

        <!-- 条件查询 -->
        <div>
            <el-row type="flex" class="row-bg">
            <el-col :span="22">
                  <el-form :inline="true" :model="queryData" class="demo-form-inline" size="small">

            <el-form-item label="用户姓名">
               <el-input v-model="queryData.userName" placeholder="请输入用户姓名" clearable></el-input>
            </el-form-item>

               <el-form-item label="用户账户">
               <el-input v-model="queryData.userAccount" placeholder="请输入用户账户" clearable></el-input>
            </el-form-item>

             <el-form-item label="用户类型">
                  <el-select v-model="queryData.userType" placeholder="请选择" clearable>
                  <el-option
                    label="管理员"
                    value="1">
                    </el-option>
                    <el-option
                    label="用户"
                    value="2">
                    </el-option>
                </el-select>
            </el-form-item>

           

            <el-form-item label="用户状态"  >
                  <el-select v-model="queryData.userState" placeholder="请选择" clearable>
                  <el-option
                    label="启用"
                    value="1">
                    </el-option>
                    <el-option
                    label="禁用"
                    value="2">
                    </el-option>
                </el-select>
            </el-form-item>

             <el-form-item label="选择日期" clearable>
               <el-date-picker
                    v-model="queryData.createdTime"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                    >
                    </el-date-picker>
            </el-form-item>
            
            <!-- 查询按钮 -->
            <el-form-item>
                <el-button type="primary" @click="query">查询</el-button>
            </el-form-item>

            </el-form>
            </el-col>


            <!-- 添加按钮 -->
            <el-col :span="2">
                 <el-button type="primary" @click="addUser" size="small">添加</el-button>
            </el-col>
            </el-row>


            <!-- 添加用户弹窗 -->
            <el-dialog
                title="添加用户"
                :visible.sync="dialogVisible"
                width="60%"
                :before-close="handleClose">

                <el-row type="flex" class="row-bg">
                    <el-col :span="10" :offset="6">
                         <div>
                    <el-form :model="addData" status-icon  label-width="100px" >

                    <el-form-item label="用户姓名" prop="userName">
                        <el-input type="text" v-model="addData.userName" auto-complete="off"></el-input>
                    </el-form-item>

                      <el-form-item label="用户账户" prop="userAccount">
                        <el-input type="text" v-model="addData.userAccount" auto-complete="off"></el-input>
                    </el-form-item>

                      <el-form-item label="用户类型">
                        <el-select v-model="addData.userType" placeholder="请选择">
                        <el-option
                            label="管理员"
                            value="1">
                            </el-option>
                            <el-option
                            label="用户"
                            value="2">
                            </el-option>
                        </el-select>
                    </el-form-item>

                     <el-form-item label="用户状态"  >
                  <el-select v-model="addData.userState" placeholder="请选择" >
                  <el-option
                    label="启用"
                    value="1">
                    </el-option>
                    <el-option
                    label="禁用"
                    value="2">
                    </el-option>
                </el-select>
            </el-form-item>

                    </el-form>
                </div>


                    </el-col>
                </el-row>
                
               
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addUserSubmit">提交</el-button>
                </span>
                </el-dialog>

          
        </div>


        <!-- 数据表格展示 -->
        <div class="tableShow">

            <el-table
            :data="tableData"
            border
            style="width: 100%">

            <el-table-column
            prop="userName"
            label="用户姓名"
            >
            </el-table-column>

            <el-table-column
            prop="userType"
            label="用户类型"
            >
              <template slot-scope="scope">
                {{scope.row.userType==="1"?"管理员":"用户"}}
            </template>
            </el-table-column>

            <el-table-column
            prop="userAccount"
            label="用户账户"
            >
            </el-table-column>

            <el-table-column
            prop="userState"
            label="用户状态">

              <template slot-scope="scope">
                {{scope.row.userState==="1"?"启用":"禁用"}}
            </template>
            </el-table-column>

            <el-table-column
            prop="createdTime"
            label="添加时间">
            </el-table-column>

              <el-table-column
                fixed="right"
                label="操作"
                width="100">
                <template slot-scope="scope">
                   
                    <el-button type="primary" size="small">编辑</el-button>
                </template>
                </el-table-column>

            </el-table>

            <!-- 分页 -->
            <el-row type="flex" class="row-bg">
                <el-col :span="6"></el-col>
                <el-col :span="6" :offset="2">
                    <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                @current-change="currentChange"
                >
            </el-pagination>
                </el-col>
                <el-col :span="6"></el-col>
            </el-row>

        </div>
    </div>
</template>
<script>
import * as API from "../http/api";
export default {
  created() {
    let that = this;
    that.getData();
  },
  data() {
    return {
      tableData: [], //表格数据
      total: 1000, //页码总数
      pageIndex: 1, //当前页码

      dialogVisible: false, //添加弹框的开关

      // 条件查询
      queryData: {
        userName: null,
        userType: null,
        userAccount: null,
        userState: null,
        createdTime: null
      },

      addData: {
        userName: null,
        userType: "1",
        userAccount: null,
        userState: "1"
      }
    };
  },
  methods: {
    // 获取表格数据
    getData() {
      let that = this;
      that
        .$axios({
          method: "get",
          url: API.queryUser,
          params: {
            userName: that.queryData.userName,
            userType: that.queryData.userType,
            userAccount: that.queryData.userAccount,
            userState: that.queryData.userState,
            createdTime: that.queryData.createdTime,
            pageIndex: that.pageIndex,
            pageSize: "20"
          }
        })
        .then(res => {
          console.log(res.result);
          that.tableData = res.result;
          that.total = res.countPage * 10;
        });
    },
    // 切换页码时改变
    currentChange(value) {
      let that = this;
      that.pageIndex = value + "";
      that.getData();
    },
    // 条件查询
    query() {
      let that = this;
      that.pageIndex="1"
      that.getData();
    },
    // 点击添加按钮时
    addUser() {
      let that = this;
      that.dialogVisible = true;
    },
    handleClose(done) {
      done();
    },
    // 点击提交添加用户
    addUserSubmit() {
      let that = this;
      that
        .$axios({
          method: "get",
          url: API.addUser,
          params: {
            userName: that.addData.userName,
            userType: that.addData.userType,
            userAccount: that.addData.userAccount,
            userState: that.addData.userState
          },
          customErr: true
        })
        .then(res => {
          console.log(res);
          if (res.code === 0) {
            this.$message({
              message: "添加成功",
              type: "success"
            });
            that.dialogVisible = false;
            that.addData.userName=null;
            that.addData.userType=null;
            that.getData();
          } else {
           this.$message({
              message: "添加失败",
              type: "error"
            });
          }
        });
    }
  }
};
</script>
<style lang="scss">
</style>
